<script setup lang="jsx">
import { computed, reactive, ref } from 'vue';
import { useElementSize } from '@vueuse/core';
import { DeleteOutlined, DownloadOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons-vue';
import useResetTableRef from '@/hooks/common/resetTableRef';
import useSearchData from '@/hooks/common/searchData';
import { vcpget, vcppost } from '@/service/api/modules/erp';

const [searchParams, resetSearchParams] = useResetTableRef({
  fullProdNo: null,
  time: null
});
const tableRef = ref(null);
const searchData = useSearchData(searchParams);

const searchFormList = [
  {
    type: 'input',
    key: 'fullProdNo',
    label: '生产型号',
    span: 24,
    md: 12,
    lg: 10,
    xl: 8,
    xxl: 6,
    placeholder: '请输入生产型号',
    showTime: true
  },
  // {
  //   type: 'select',
  //   key: 'state',
  //   selectOptions: [
  //     {
  //       label: '选项一',
  //       value: '1'
  //     },
  //     {
  //       label: '选项二',
  //       value: '2'
  //     }
  //   ],
  //   label: '料号',
  //   span: 24,
  //   md: 12,
  //   lg: 10,
  //   xl: 8,
  //   xxl: 6,
  //   placeholder: '请输入料号',
  //   showTime: true
  // },
  {
    type: 'dateRangePicker',
    key: 'time',
    label: '日期',
    span: 24,
    md: 12,
    lg: 10,
    xl: 8,
    xxl: 6,
    showTime: true // 显示时分秒选择
  }
];

const pagination = reactive({
  current: 1,
  pageSize: 200,
  showSizeChanger: true,
  pageSizeOptions: ['50', '100', '200', '300', '500'],
  showQuickJumper: true,
  showTotal: total => {
    return `共${total}条`;
  },
  total: 0,
  onChange: async (current, size) => {
    pagination.current = current;
    pagination.pageSize = size;
    getData();
  }
});

const columns = ref([
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 100,
    align: 'center',
    checked: true
  },
  {
    key: 'lotNo',
    dataIndex: 'lotNo',
    title: '批卡号',
    width: 180,
    align: 'center',
    checked: true
  },
  {
    key: 'fullProdNo',
    dataIndex: 'fullProdNo',
    title: '生产型号',
  width: 180,
    align: 'center',
    checked: true
  },
  {
    key: 'fromTechName',
    dataIndex: 'fromTechName',
    title: '出账工序',
    width: 180,
    align: 'center',
    checked: true
  },
  {
    key: 'toTechName',
    dataIndex: 'toTechName',
    title: '入账工序',
    width: 200,
    align: 'center',
    checked: true
  },
  {
    key: 'postUnit',
    dataIndex: 'postUnit',
    title: '过账单位',
    width: 130,
    align: 'center',
    checked: true
  },
  {
    key: 'passQty',
    dataIndex: 'passQty',
    title: '过账数量',
    width: 130,
    align: 'center',
    checked: true
  },
  {
    key: 'passPcs',
    dataIndex: 'passPcs',
    title: '过账pcs数',
    align: 'center',
    checked: true
  },
  {
    key: 'createBy',
    dataIndex: 'createBy',
    title: '过账员',

    align: 'center',
    checked: true
  },
  {
    key: 'createDate',
    dataIndex: 'createDate',
    title: '过账时间',
    width: 160,
    align: 'center',
    checked: true
  }

]);







function search() {
  tableRef.value.getData(1);
}

function reset() {
  resetSearchParams();
  search();
}


</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <!-- <Search v-model:model="searchParams" @reset="search()" @search="search()" /> -->
    <CommonSearch
      v-model:searchParams="searchParams"
      :form-list="searchFormList"
      @search="search"
      @reset="reset"
    ></CommonSearch>

    <Table
      ref="tableRef"
      v-model:searchParams="searchData"
      :column="columns"
      :show-row-selection="false"
      :auto-generate-uuid="true"
      :scroll="{ y: 'auto' }"
      is-init-get-data
      url="/erpsyncmes/wip/findBasePostRecord"
    >
    </Table>

  </div>
</template>

<style lang="scss" scoped>
.row-red-background {
  background-color: rgba(244, 56, 56, 0.7) !important; /* !important 可能需要以确保覆盖其他样式 */
}
.expired {
  color: red;
  font-weight: bold;
  font-size: larger;
}

:deep(.surely-table-wrapper) {
  &.has-footer-table {
    .ant-spin-nested-loading {
      .ant-spin-container {
        .surely-table {
          height: calc(100% - 40px - v-bind('footerHeight')) !important;
        }
      }
    }
  }
}
</style>
